<!-- 物业交割单 -->
<template>
	<a-modal :visible="visible" width="800px" class="delivery-note" title="物业交割单" centered @cancel="cancel" :maskClosable="false" :bodyStyle="{paddingBottom: 0}">
		<div class="delivery-note-module tab-box">
			<div class="d-module-title">
				<b>房屋配置</b>
			</div>
			<vxe-grid ref="grid" v-bind="gridOptions"></vxe-grid>
		</div>
		<div class="delivery-note-module">
			<div class="d-module-title">
				<b>备注</b>
			</div>
			<div>
				<a-textarea placeholder="请输入" v-model:value="modelRef.comment" show-count :maxlength="100" />
			</div>
		</div>
		<div class="delivery-note-module">
			<div class="d-module-title">
				<b>水电燃气底数(只做记录)</b>
			</div>
			<vxe-grid v-bind="option" border size="small" show-overflow></vxe-grid>
		</div>
		<div class="delivery-note-module">
			<div class="d-module-title">
				<b>附件</b>
			</div>
			<div>
				<file-upload v-model:files="attachments" />
			</div>
		</div>
		<template #footer>
			<a-button @click="cancel">关闭</a-button>
		</template>
	</a-modal>
</template>
<script setup lang="ts">
	import {onUpdated, reactive, ref, watch} from 'vue'
	import {DownOutlined} from '@ant-design/icons-vue'
	import {VxeGridProps} from 'vxe-table'
	import {getCurEleAndWaterQuantity, houseConfigGetList} from '@/api/contract'
	import FileUpload from '@/components/common/file-upload.vue'
	import SelectDeliveryOrder from './select-delivery-order.vue'
	import LossAssetsDialog from './loss-assets-dialog.vue'
	import ScrapAssetsDialog from './scrap-assets-dialog.vue'
	import DeployAssetsDialog from './deploy-assets-dialog.vue'
	import {useStore} from '@/store/index'
	import {Img} from 'yuxin-base/src/types'
	import {METER_DEVICE_MAP} from '@/constant/device'
	import {defaultMeters} from '@/interface/contract'

	const hasPermissions = useStore().hasPermissions

	const modelRef = reactive<any>({
		comment: null,
		attachments: [],
		articles: [],
		meters: defaultMeters()
	})

	const attachments = ref<Img[]>([])

	const baseNumbe = ref<any>({
		// clodWaterMaterStatus: null,
		// clodWaterMaterStatusName: null,
		// coldWaterMaterRead: null,
		// eleMaterRead: null,
		// eleMaterStatus: null,
		// eleMaterStatusName: null,
		// hotWaterMaterRead: null,
		// hotWaterMaterStatus: null,
		// hotWaterMaterStatusName: null,
		// remainEleQuantity: null,
		// remainWaterAmount: null,
		// bindEleMater: false,
		// bindHotWaterMater: false,
		// bindClodWaterMater: false
	})

	const operationField = reactive<any>({
		showLoss: false,
		showScrap: false,
		showDeploy: false
	})
	const delivery = ref<any>(false)
	const props = defineProps({
		visible: {
			type: Boolean,
			request: true
		},
		id: {
			type: String,
			default: ''
		}
	})
	const checkList = reactive<any>([])

	const operation = [
		{
			name: '调配',
			field: 'deployment',
			action: ['mk_enterprise_assets_list_deploy']
		},
		{
			name: '报废',
			field: 'scrapped',
			action: ['mk_enterprise_assets_list_scrap']
		},
		{
			name: '遗失',
			field: 'lost',
			action: ['mk_enterprise_assets_list_lost']
		}
	]
	const modelData = reactive<any>({
		record: {}
	})
	const deliveryShow = () => {
		modelRef.articles = grid.value.getTableData().tableData
		delivery.value = true
	}
	onUpdated(() => {
		console.log(props.id, 'props.data')
		// modelRef.articles = props.id
	})

	const getCheckData = (list: any) => {
		checkList.value = list
		insertEvent(-1)
	}
	const insertEvent = async (row: any) => {
		console.log(checkList, 'checkListcheckListcheckListcheckList')
		const $table = grid.value
		const {row: newRow} = await $table.insertAt(checkList.value, row)
		await $table.setEditCell(newRow, 'name')
	}

	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}

	const deleteAssetDate = () => {
		// remove
		// let list = grid.value.getTableData().tableData
		// let index = list.findIndex(item => (item.id = modelData.record.id))
		grid.value.remove(modelData.record)
	}
	const sendRequest = () => {
		let list = grid.value.getTableData().tableData
		modelRef.articles = list
		// 附件列表id集合
		modelRef.attachments = JSON.stringify(attachments.value.map(o => o.id))

		emit('success', modelRef)

		console.log(modelRef)
		cancel()
	}
	const setEleAndWaterQuantity = () => {
		// 获取水电表详情
		getCurEleAndWaterQuantity({
			roomId: props.id
		}).then((res: any) => {
			baseNumbe.value = res.data

			if (baseNumbe.value.clodWaterMaterStatusName == '在线') {
				modelRef.meters[0].read = baseNumbe.value.coldWaterMaterRead
			}
			if (baseNumbe.value.eleMaterStatusName == '在线') {
				modelRef.meters[3].read = baseNumbe.value.eleMaterRead
			}
			if (baseNumbe.value.hotWaterMaterStatusName == '在线') {
				modelRef.meters[2].read = baseNumbe.value.hotWaterMaterRead
			}

			firstOpen.value = true
		})
	}

	const handler = (row: any, type: string) => {
		modelData.record = row
		switch (type) {
			case 'deployment':
				//修改
				operationField.showDeploy = true
				console.log('调配')
				break
			case 'scrapped':
				//禁用
				console.log(modelData.record.id, 'modelData.record.id')
				operationField.showScrap = true
				console.log('报废')
				break
			case 'lost':
				//启用
				operationField.showLoss = true
				// confirm(row, 1)
				console.log('遗失')
				break
		}
	}
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		height: '300px',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '种类',
				minWidth: 100,
				align: 'left',
				field: 'typeName'
			},
			{
				title: '物品名称',
				minWidth: 100,
				align: 'left',
				field: 'configName'
			},
			{
				title: '价格(元)',
				minWidth: 80,
				align: 'left',
				field: 'price'
			},
			{
				title: '数量',
				minWidth: 50,
				align: 'center',
				field: 'count'
			}
		],
		pagerConfig: {
			autoHidden: true
		},
		proxyConfig: {
			props: {
				message: 'msg',
				result: 'data.articles',
				total: 'data.total'
			},
			ajax: {
				query() {
					// return houseConfigGetList(props.id)
					return {}
				}
			}
		}
	})

	const option = reactive<VxeGridProps>({
		size: 'small',
		height: '300px',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '冷水表',
				minWidth: 100,
				align: 'left',
				field: 'typeName'
			},
			{
				title: '中水表',
				minWidth: 100,
				align: 'left',
				field: 'configName'
			},
			{
				title: '热水表',
				minWidth: 80,
				align: 'left',
				field: 'price'
			},
			{
				title: '电表',
				minWidth: 50,
				align: 'center',
				field: 'count'
			},
			{
				title: '燃气表',
				minWidth: 50,
				align: 'center',
				field: 'count'
			}
		],
		pagerConfig: {
			autoHidden: true
		},
		proxyConfig: {
			props: {
				message: 'msg',
				result: 'data.articles',
				total: 'data.total'
			},
			ajax: {
				query() {
					// return houseConfigGetList(props.id)
					return {}
				}
			}
		}
	})

	const firstOpen = ref<boolean>(false)
	watch([() => props.visible, () => props.id], (newVal, oldVal) => {
		if (newVal[0]) {
			if (newVal[1] !== oldVal[1] && oldVal[1] !== '') {
				grid.value.commitProxy('query')
				console.log(newVal, 1111)
			}
			if (!firstOpen.value) {
				modelRef.meters = defaultMeters()
				//获取的是剩余读数而不是当前读数，不符合业务逻辑，暂时屏蔽
				// setEleAndWaterQuantity()
			}
		}
	})
	// 重置表单
	const formRef = ref<any>()
</script>
<style lang="less">
	.delivery-note .ant-modal-content {
		.ant-modal-body {
			height: 600px;
			overflow-y: auto;
		}

		.tab-box {
			position: relative;

			.right-btn {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.d-module-title {
			margin-bottom: 5px;
		}
		.delivery-note-module {
			margin-bottom: 20px;
		}
	}
</style>
